<template>
  <f7-page>
    <f7-navbar title="用户添加" back-link="Back"></f7-navbar>
    <f7-list inline-labels no-hairlines-md>
      <f7-list-input
        label="姓名"
        type="text"
        placeholder="Your name"
        required
        validate
        :value="realname"
        @input="realname = $event.target.value"
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="用户名"
        type="text"
        placeholder="Your user"
        required
        validate
        :value="username"
        @input="username = $event.target.value"
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="密码"
        type="text"
        placeholder="Your password"
        minlength="8"
        required
        validate
        :value="password"
        @input="password = $event.target.value"
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="手机号"
        type="tel"
        placeholder="Your Phone"
        required
        validate
        :value="contact"
        @input="contact = $event.target.value"
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="类型"
        type="select"
        defaultValue="Male"
        :value="role"
        @input="role = $event.target.value"
      >
        <option value="超级管理员">超级管理员</option>
        <option value="房管">房管</option>
      </f7-list-input>
    </f7-list>
    <f7-button fill raised @click="queding" :disabled="disabled">确定添加</f7-button>
  </f7-page>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  computed: {
    disabled() {
      if (this.password.length <= 7) {
        return !(
          this.password &&
          this.username &&
          this.realname &&
          this.contactl
        );
      }
    }
  },
  data() {
    return {
      realname: "",
      username: "",
      password: "",
      contact: "",
      role: ""
    };
  },
  methods: {
    queding() {
      URL = "/caofuying/user/insertUser";
      axios
        .post(
          URL,
          qs.stringify({
            username: this.username,
            realname: this.realname,
            password: this.password,
            contact: this.contact,
            role: this.role
          })
        )
        .then(r => {});
      const self = this;
      const app = self.$f7;
      app.dialog.alert(`添加成功`, () => {
        this.$f7router.navigate("/supertubelist/");
      });
    }
  }
};
</script>